import React, {Component} from 'react';
import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
import auth from "../../../common/auth";

export default class extends Component {
    //初始值
    state = {
        phone: '',
        pwd: ''
    };
    submit = () => {
        const {submit} = this.props;
        const {phone, pwd} = this.state;
        submit(phone, pwd);
    };

    componentDidMount() {
        auth.getMobile()
            .then(data => {
                this.setState({
                    phone: data.mobile
                });
            })
            .catch(() => {
                console.log('找不到手机号');
            });
    }

    render() {
        const {phone, pwd} = this.state;
        const {isFetching} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.inputWrap}>
                    <Image source={require('../../../images/auth/icon_phone.png')} style={styles.img}/>
                    <TextInput
                        returnKeyType="next"
                        clearButtonMode="always"
                        underlineColorAndroid="transparent"
                        onChangeText={phone => this.setState({
                            phone: phone.trim()
                        })}
                        keyboardType="phone-pad"
                        placeholder="请输入手机号"
                        style={styles.input}
                        value={phone}
                        maxLength={11}
                    />
                </View>
                <View style={styles.inputWrap}>
                    <Image source={require('../../../images/auth/icon_lock.png')} style={styles.img}/>
                    <TextInput
                        returnKeyType="done"
                        clearButtonMode="always"
                        onChangeText={pwd => this.setState({
                            pwd: pwd.trim()
                        })}
                        secureTextEntry={true}
                        underlineColorAndroid="transparent"
                        placeholder={'请输入6-32位密码'}
                        style={styles.input}
                        value={pwd}
                        maxLength={32}
                    />
                </View>
                <TouchableOpacity onPress={this.submit} disabled={isFetching}>
                    <View style={styles.btnWrap}>
                        <Text style={styles.btnText}>登录</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        margin: 40,
        marginTop: 0,
        flex: 1
    },
    inputWrap: {
        marginBottom: 20,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        height: 32
    },
    img: {
        width: 20,
        height: 20,
        marginRight: 8
    },
    input: {
        flex: 1,
        height: 32,
        borderBottomWidth: 1,
        borderColor: '#d7d7d7',
        padding: 0
    },
    smsWrap: {
        position: 'absolute',
        right: 0,
        top: 0,
    },
    smsText: {
        height: 32,
        lineHeight: 32,
        paddingLeft: 20,
        paddingRight: 20,
        color: 'purple'
    },
    btnWrap: {
        backgroundColor: '#f42f19',
        borderRadius: 18,
        marginTop: 24
    },
    btnText: {
        fontSize: 15,
        width: '100%',
        height: 36,
        lineHeight: 36,
        textAlign: 'center',
        color: '#fff'
    }
});
